<template id="">
    <div class="cen-table">
        <div class="table-top">{{headerData.shortName}} Block：{{dataList.blockHash}}</div>
        <table class="table-layout" border="1">
            <thead class="layout-head">
                <tr>
                    <th width="10%">Height</th>
                    <th width="10%">Difficulty</th>
                    <th width="10%">Confirmations</th>
                    <th width="10%">Size (kB)</th>
                    <th width="10%">Bits</th>
                    <th width="15%">Nonce</th>
                    <th width="25%">Timestamp</th>
                </tr>
            </thead>
            <tbody class="layout-cen ">
                <tr class="sussess">
                    <td v-text="dataList.height"></td>
                    <td v-text="dataList.difficulty"></td>
                    <td v-text="dataList.confirmations"></td>
                    <td v-text="dataList.size"></td>
                    <td v-text="dataList.bits"></td>
                    <td v-text="dataList.nonce"></td>
                    <td v-text="dataList.time"></td>
                </tr>
            </tbody>
        </table>
        <br>
        <br>
        <div class="table-top">Latest Transactions</div>
        <table class="table-layout" border="1">
            <thead class="layout-head">
                <tr>
                    <th class="">Hash</th>
                    <th class="">Recipients</th>
                    <th class="">Amount ({{headerData.shortName}})</th>
                </tr>
            </thead>
            <tbody class="layout-cen">
                <tr v-for="(item,index) of dataList.txList">
                    <td @click="lookHash(item,index)" v-text="item.txId" class="cursor"></td>
                    <td v-text="item.recipients"></td>
                    <td v-text="item.amount"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
export default {
    name:'block',
    data(){
        return{
            dataList:[]
        }
    },
    computed: {
        ...mapGetters(['G_SELECT_DATA']),
    },
    created () {
        this.headerData = this.G_SELECT_DATA;
        this.getData();
    },
    methods: {
        lookHash(item,index){
            if(item.txId){
                this.$router.push({name:'tx',params:{txid:item.txId}});
            }
        },
        getData(){
            let type = this.$route.params.type;
            let has = this.$route.params.has;
            let url = '';
            type == 1?url = 'explorer/hsr/api/v1/block/'+has :url = 'explorer/hsr/api/v1/blockhash/'+has;
            this.$http({
                url     : url,
                method  : 'get',
            }).then((res)=>{
                let data = res.data;
                if(data.responseCode === 1){
                    this.dataList = data.responseData;
                }
            })
        }
    },
    watch:{
        '$route'(to,from){
            this.getData();
        }
    }
}
</script>
